<script>
import HumanTimbre from "@/views/aihuman/humanManagement/addHuman/humanTimbre.vue";
import {humanDetail, saveAimeta} from "@/api/aihuman/humanConfig/config";
import {uploadFile} from "@/api/aihuman/common/minio";
import HumanInfo2d from "@/views/aihuman/humanManagement/addHuman/humanInfo2d.vue";
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "addHuman2d",
  components: {HumanInfo2d, HumanTimbre},
  data() {
    return {
      humanId: '',
      humanData: {},
      // 第一步 表单
      form: {
        aimetaName: '',
        aimetaUse: '',
        aimetaType: '',
        aimetaTag: '',
        status: 1,
        voiceImageLink: '',
        dimensionType: '2',
        aimetaCode: '',
        aimetaAvatar: ''
      },
      // 配置数据，收集动作、表情等数据
      configData: {},
      curStep: 1,
      steps: [
        {
          name: '基本信息',
          icon: require('@/assets/aihuman/humanManagement/humanstep1.png'),
          desc: '填写数字人基本信息',
          step: 1
        },
        {
          name: '音色  ',
          icon: require('@/assets/aihuman/humanManagement/humanstep4.png'),
          desc: '设置数字人的音色  ',
          step: 2
        }
      ]
    }
  },
  created() {
  },
  methods: {
    getUrl,
    // 新增初始化数据
    initPage(activeName) {
      this.form.voiceImageLink = ''
      // 表单数据
      this.$refs.humanInfo.form.aimetaName = ''
      this.$refs.humanInfo.form.aimetaType = ''
      this.$refs.humanInfo.form.aimetaUse = ''
      this.$refs.humanInfo.form.aimetaCode = ''
      this.$refs.humanInfo.form.status = 0
      this.$refs.humanInfo.form.aimetaTag = ''
      this.$refs.humanInfo.form.aimetaAvatar = ''
      this.$refs.humanInfo.dynamicTags = []
      this.$nextTick(() => {
        this.$refs.humanInfo.$refs.form.clearValidate()
      })
      // 第二步数据
      // this.$refs.humanModelStep.model = []
      // this.$refs.humanModelStep.attitudes = []
      // this.$refs.humanModelStep.expressions = []
      // this.$refs.humanModelStep.actions = []

      // 第三部 数据
      // this.$refs.fuzhuang.fuzhuang = []
      // this.$refs.fuzhuang.defaultDress = []

      // 设置音色
      this.$refs.soundRef.sound = []
    },
    async getDetail(id) {
      const {data} = await humanDetail(id)
      // console.log(data,'数据');
      this.form.voiceImageLink = data.data.voiceImageLink
      // 第一步数据
      this.$refs.humanInfo.form.aimetaName = data.data.aimetaName
      this.$refs.humanInfo.form.aimetaType = data.data.aimetaType
      this.$refs.humanInfo.form.aimetaUse = data.data.aimetaUse
      this.$refs.humanInfo.form.status = data.data.status
      this.$refs.humanInfo.form.aimetaCode = data.data.aimetaCode
      this.$refs.humanInfo.form.aimetaTag = data.data.aimetaTag
      this.$refs.humanInfo.form.aimetaAvatar = data.data.aimetaAvatar
      this.$refs.humanInfo.dynamicTags = data.data.aimetaTag ? data.data.aimetaTag.split(',') : []
      this.$refs.humanInfo.$refs.form.clearValidate()

      //   第四部数据
      this.$refs.soundRef.sound = data.data.defaultAimetaAssetsSoundType ? [data.data.defaultAimetaAssetsSoundType] : []

    },
    async uploadHumanImg(file) {
      let formData = new FormData()
      formData.append('file', file.file)
      formData.append('keyFolderPath', 'humanManagement/humanConfig')

      const {data} = await uploadFile(formData)
      this.form.voiceImageLink = data.data.filePath
    },
    handleCancel() {
      this.$emit('on-cancel')
    },
    handlePrev() {
      if (this.curStep === 1) {
        return false
      }
      this.curStep--
    },
    async saveData() {
      if (this.form.voiceImageLink === '') {
        this.$message.error('请上传数字人形象图')
        return
      }
      this.configData.sound = this.$refs.soundRef.sound
      const params = {
        ...this.form,
        id: this.humanId,
        defaultSoundId: this.configData.sound.length > 0 ? this.configData.sound[0].id : ''
      }
      console.log(params, '保存参数');
      const {data} = await saveAimeta(params)
      this.$message.success(data.msg)
      this.$emit('ok')
    },
    handleNext() {
      if (this.curStep === 2) return false
      if (this.curStep === 1) {
        this.$refs.humanInfo.$refs['form'].validate((valid) => {
          if (valid) {
            let data = this.$refs.humanInfo.form
            this.form = {...this.form, ...data}

            if (this.form.voiceImageLink === '') {
              this.$message.error('请上传数字人形象图')
              return
            }

            this.curStep++
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        console.log(this.form, '表单数据');
      } else if (this.curStep === 2) {
        console.log(this.configData, '点击第二部的下一步按钮');
        this.configData.sound = this.$refs.soundRef.sound

      }
    }
  }
}
</script>

<template>
  <div>
    <header class="human-header">
      <div
        v-for="(item, index) in steps"
        :key="index"
        :class="['step-box', {active: curStep === item.step}]">
        <img :src="item.icon" alt="">
        <div class="step-title">
          {{ item.name }}
        </div>
        <div class="step-desc">
          {{ item.desc }}
        </div>
      </div>
    </header>

    <div class="content">
      <div class="human-upload">
        <el-upload
          class="human-uploader"
          :http-request="uploadHumanImg"
          action=""
          accept="image/*"
          :show-file-list="false">
          <img v-if="form.voiceImageLink" :src="getUrl() + form.voiceImageLink" class="human-img"/>
          <template v-else>
            <i class="el-icon-upload2"></i>
            <div>上传数字人形象</div>
          </template>
        </el-upload>
      </div>
      <div class="content-main">
        <human-info2d
          ref="humanInfo"
          v-show="curStep === 1"
        />

        <human-timbre
          ref="soundRef"
          v-show="curStep === 2"
        />
      </div>

    </div>

    <div class="button-box">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-if="curStep > 1" type="primary" @click="handlePrev">上一步</el-button>
      <el-button v-else type="primary" @click="handleNext">下一步</el-button>
      <el-button v-if="curStep === 2" type="primary" @click="saveData">保存</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.button-box {
  border-top: 1px solid #E4E7ED;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 15px;
  margin-top: 15px;
}

.content-main {
  flex: 1;
}

.human-img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.human-uploader {
  background: #F5F8FF;
  height: 450px;
  width: 400px;

  /deep/ .el-upload {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    i {
      font-size: 40px;
      color: #999;
    }
  }
}

.human-upload {
  margin-right: 20px;
}

.content {
  padding-top: 15px;
  display: flex;
}

.step-desc {
  font-size: 14px;
  padding-top: 8px;
}

.step-title {
  font-weight: bold;
  font-size: 18px;
}

.step-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-right: 30px;

  &.active {
    &::after {
      background: #0B57D6;
      position: absolute;
      content: '';
      height: 2px;
      width: 100%;
      top: 120px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.human-header {
  border-bottom: #EEEFF2 2px solid;
  height: 120px;
  display: flex;
  //justify-content: space-between;
}
</style>
